<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rem</title>
    <style>
        html {
            font-size: 100px; /* 根据设计稿的尺寸设置html元素的font-size */
        }
        p {
            font-size: 0.24rem; /* 使用rem单位设置元素的字体大小 */
            width: 1.5rem; /* 使用rem单位设置元素的宽度 */
            height: 2.5rem; /* 使用rem单位设置元素的高度 */
            border: 1px solid #000; /* 设置元素的边框 */
        }
        
    </style>
  </head>
  <body>
    <p>
      使用rem单位，根据设计稿的尺寸，设置html元素的font-size，然后使用rem单位来设置元素的宽高。
      这样，元素的宽高将根据html元素的font-size进行缩放。
    </p>
  </body>
  <script src="../js篇/原型链.js"></script>
</html>
